<template>
	<view class="myAuth">
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="form1">
			<u-form-item label="姓名" prop="name" borderBottom ref="item1" labelWidth="100" :required="type!=1">
				<u--input v-model="formData.name" border="none" placeholder="请输入内容"></u--input>
			</u-form-item>
			<u-form-item label="性别" labelWidth="100" prop="gender" borderBottom
				@click="showSex = true;hideKeyboard()" ref="item1" :required="type!=1">
				<u--input v-model="formData.gender" disabled placeholder="请选择性别" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="项目职位" prop="project_position" borderBottom ref="item1" labelWidth="100" :required="type!=1">
				<u--input v-model="formData.project_position" border="none" placeholder="请输入内容" ></u--input>
			</u-form-item>
			<u-form-item label="个人简介" prop="bio" :borderBottom="false" ref="item1" labelWidth="100"
				labelPosition="top" :required="type!=1">
				<u--textarea placeholder="请输入个人简介" v-model="formData.bio" :count="false" border="surround"></u--textarea>
			</u-form-item>
		</u--form>
		<view class="botBtn">
			<view style="width: 100%;">
				<u-button class="" text="保存"
					customStyle="background-color: #157DFA;color:#fff;margin-top:70px;width:90%;border:1px solid #157DFA"
					@click="goAuth"></u-button>
			</view>
			<!-- <view class="custom-style">
				<u-button class="" text="保存"
					customStyle="background-color: #157DFA;color:#FFFFFF;margin-top:70px;width:90%;" @click="goAuth"></u-button>
			</view> -->
		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		profile,getUser
	} from '@/request/api.js'
	export default {
		data() {
			return {
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				showSex: false,
				formData: {
					bio: '',
					project_position: '',
					name: '',
					gender:''
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'project_position': {
						type: 'string',
						required: true,
						message: '请填写个人职位',
						trigger: ['blur', 'change']
					},
					'gender': {
						type: 'string',
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
					'bio': {
						type: 'string',
						required: true,
						message: '请输入个人简介',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad() {
			this.getUser()
		},
		methods: {
			async getUser(){
				let res = await getUser()
				this.formData = res.data
				console.log(res)
			},
			sexSelect(e) {
						this.formData.gender = e.name
						this.$refs.form1.validateField('gender')
					},
			goAuth() {
				this.$refs.form1.validate().then(res => {
					profile(this.formData).then(res => {
						if (res.code == 1) {
							uni.navigateTo({
								url: '/my_pages/components/success?title=个人信息已保存成功'
							})
							// for (let k in this.formData) {
							// 	this.formData[k] = ''
							// }
						}
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	.myAuth {
		padding: 30rpx;
	}
   ::v-deep .u-input{
	   background-color: #fff !important;
   }
	.botBtn {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.custom-style {
		width: 48% !important;
	}
</style>
